<template>
  <div class="memory-info">
    <el-card v-loading="loading">
      <div class="tab-header">
        <span>内存信息</span>
        <el-icon class="refresh-icon" @click="refresh">
          <Refresh />
        </el-icon>
      </div>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="总内存">
          {{ info?.total }}
        </el-descriptions-item>
        <el-descriptions-item label="可用内存">
          {{ info?.available }}
        </el-descriptions-item>
        <el-descriptions-item label="使用率">
          <el-progress :percentage="parseFloat(info?.usage)" :format="percentageFormat" />
        </el-descriptions-item>
      </el-descriptions>

      <!-- 内存条信息表格 -->
      <div class="memory-modules">
        <el-table :data="info?.modules" border stripe class="mt-16">
          <el-table-column prop="manufacturer" label="制造商" />
          <el-table-column prop="capacity" label="容量" />
          <el-table-column prop="speed" label="频率" />
          <el-table-column prop="slot" label="插槽" />
          <el-table-column prop="part_number" label="型号" />
          <el-table-column prop="serial_number" label="序列号" />
          <el-table-column prop="form_factor" label="内存条类型" />
          <el-table-column prop="memory_type" label="内存类型" />
          <el-table-column prop="bank_label" label="内存通道" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { getMemoryInfo } from '/@/api/monitor'

const info = ref({} as any)
const loading = ref(false)

const percentageFormat = (percentage: number): string => `${percentage}%`

const refresh = async () => {
  try {
    loading.value = true
    const { data } = await getMemoryInfo()
    info.value = data.memory
  } finally {
    loading.value = false
  }
}

defineExpose({
  refresh
})
</script>

<style lang="scss" scoped>
@import '../styles/common.scss';

.memory-info {
  .memory-modules {
    margin-top: 16px;
  }
}
</style> 